@media screen and (max-width:450px) {
body.nav-open .nav {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
body.nav-open .nav-toggle {
  box-shadow: none;
}
body.nav-open .nav-toggle:before {
  width: 2000px;
  height: 2000px;
  background-color:  #2151CB;
}
body.nav-open .nav-toggle .icon {
  width: 0;
}
body.nav-open .nav-toggle .icon:before {
  -webkit-transform: translateY(4px) rotate(45deg);
      -ms-transform: translateY(4px) rotate(45deg);
          transform: translateY(4px) rotate(45deg);
}
body.nav-open .nav-toggle .icon:after {
  -webkit-transform: translateY(-4px) rotate(-45deg);
      -ms-transform: translateY(-4px) rotate(-45deg);
          transform: translateY(-4px) rotate(-45deg);
}
.nav-top{ display:none;}
body.nav-open .nav-top{ display:block; }
.nav-toggle {
  width: 40px;
  height: 40px;
  z-index: 9999;
  border-radius: 50%;
  margin: 11px;
  position: absolute;
  top:0px;
  left:2px;
  cursor: pointer;
    -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
}
.nav-toggle:before {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #4A75E6;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
}
.nav-toggle .icon {
  width: 24px;
  height: 2px;
  background-color: white;
  border-radius: 2px;
  position: absolute;
  top: 19px;
  left: 8px;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  transiting-timing-function: swing;
}
.nav-toggle .icon:before,
.nav-toggle .icon:after {
  width: 24px;
  height: 2px;
  background-color: white;
  border-radius: 2px;
  content: "";
  position: absolute;
  left: 0;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-timing-function: swing;
  transition-timing-function: swing;
}
.nav-toggle .icon:before {  top: -6px;}
.nav-toggle .icon:after { top: 6px;}
.lower-screen {
  padding: 60px 0 20px 0;
  overflow-y: scroll;
  height: 450px;
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.lower-screen::-webkit-scrollbar {  display: none;}

.nav-top {
  position: absolute;
  z-index: 99999;
  top: 55px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
         margin-left: 0;
}
.nav-top li { list-style: none;float: none;  width: auto;  margin-bottom: 0;  line-height:44px;  position:relative;  height:auto;}
.nav-top li a{ display:block;  padding-left:20px;}
.subnav-bgcss{background: rgba(255,255,255,0.20);}
.subnav-bgcss .arr-down {transform:rotate(-222deg)!important; margin-top:22px;}
.nav-top li a,.nav-top li a:active,.nav-top li a:hover,.nav-top li a:visited { color: #fff}
.nav-top li:after{position:absolute; bottom:0; left:0; content:""; width:100%; height:1px; background-image: linear-gradient(270deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.40) 99%);}
.nav-top li:last-child:after{height:0}
.subleftmenu div a{ color:#fff; font-size:15px;}
.subleftmenu div{line-height:33px;}
.nav li a { display: block; padding: 0; text-align: center;  text-decoration: none;  -webkit-transition-duration: 0.25s;  transition-duration: 0.25s;}
.nav-top:hover li a { opacity:1;}
.nav-top li a span {  font-size: 17px; color: white;font-weight: bold;} 
.drop-menu-effect.active span {  color: #fff;}
.nav-top li:nth-child(2) {  width: auto;}
.nav-toggle { width: 22px; height: 22px;    margin: 13px}
.nav-toggle:before {  width: 22px;  height: 22px;}
.nav-toggle .icon {  width: 14px;  height: 1px;  top: 11px;  left: 4px;}
.nav-toggle .icon:after { width: 14px; height: 1px;}
.nav-toggle .icon:before, .nav-toggle .icon:after {  width: 14px;  height: 1px;}
.nav-toggle .icon:before { top: -4px;}
.nav-toggle .icon:after { top: 4px;}
.subleftmenu{ display:none;padding-left: 20px;padding-bottom: 10px;    padding-top: 6px;}
}

@media screen and (max-width:375px){
.nav-toggle { width: 22px; height: 22px; margin: 10px}
.nav-toggle:before { width: 22px;  height: 22px;}
.nav-toggle .icon { width: 14px;  height: 1px;  top: 11px;  left: 4px;}
.nav-toggle .icon:after { width: 14px; height: 1px;}
.nav-toggle .icon:before, .nav-toggle .icon:after { width: 14px;  height: 1px;}
.nav-toggle .icon:before { top: -4px;}
.nav-toggle .icon:after { top: 4px;}
.nav-top li a span { font-size: 16px; }
.subleftmenu div a{ font-size:14px;}
.subleftmenu div{line-height:30px;}
}